<!-- Poster -->
<template>
  <div :id="randomId">
    <div class="menuBox">
      <div class="menu">
        <span class="select-none" v-for="(item, index) in menuList" @click="menuClick(item.path)" :key="index">{{item.label}}</span>
      </div>
      <span class="boxTitle select-none"><b>{{setPoster.title ? setPoster.title : 'ch-poster'}}</b></span>
    </div>
    <div class="poster show">
      <transition name="slide-fade" v-for="(item, index) in setPoster.background" :key="index">
        <img v-show="(currentBk == index)" :src="item" class="top select-none" alt="" :index="index">
      </transition>
      <div id="posterMenu">
        <span class="select-none" v-for="(item, index) in menuList" @click="menuClick(item.path)" :key="index" :class="{active:menuActive == index}">{{item.label}}</span>
      </div>
      <div class="logo">
        <span class="en select-none"><b>{{setPoster.title ? setPoster.title : 'ch-poster'}}</b></span>
      </div>
      <div class="search">
        <slot name="search"></slot>
      </div>
    </div>
  </div>
</template>

<script>
import menu from '@C/menu.js'
export default {
  name: 'Poster',
  props: {
    setPoster: {
      default: () => {
        return {
          background: require('@a/img/login/bk1.jpg')
        }
      },
      type: Object
    }
  },
  data() {
    return {
      menuList: menu,
      randomId: '',
      currentBk: 0,
      menuActive: 0,
      isTop: true,
      timer: null
    }
  },
  methods: {
    rotation() {
      if (this.setPoster.background.length != 1) {
        this.timer = setInterval(() => {
          if (!document.getElementById(this.randomId).style) return
          if (document.getElementById(this.randomId).style.getPropertyValue('--poster-opacity') != '0') {
            if (this.currentBk == this.setPoster.background.length - 1) {
              this.currentBk = 0
            } else {
              this.currentBk += 1
            }
          }
        }, 5000)
      }
    },
    menuClick(path) {
      this.$router.push(path)
      this.$emit('menuClick', path)
      this.menuActive = path
    },
    scroll() {
      try {
        let scroll = document.documentElement.scrollTop || document.body.scrollTop
        // let height = document.body.clientHeight
        let style = document.getElementById(this.randomId).style
        style.setProperty('--poster-opacity', scroll < 200
          ? '1'
          : scroll < 438
            ? '0.5'
            : '0')
        style.setProperty('--menuBox-opacity', scroll < 200
          ? '0'
          : scroll < 438
            ? '0.5'
            : '1')
      } catch (err) {}
    }
  },
  created() {
    this.rotation()
    this.randomId = '' + this.$u.hashCode(this.$options.name + this.$u.random())
  },
  mounted() {
    this.$nextTick(() => {
      this.scroll()
    })
    window.addEventListener('scroll', this._throttle(this.scroll, 50, this.$root))
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this._throttle(this.scroll, 50, this.$root))
    clearInterval(this.timer)
  }
}
</script>
<style lang='scss' scoped>
@import '@a/scss/pc/poster.scss';

</style>
